<template>
	<view class="container">
		<view class="">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiperImages">
					<image :src="item" mode="scaleToFill" style="border-radius: 20rpx; height: 90%;width: 100%;">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="" style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
			<view class="" v-for="(item,index) in Images">
				<image :src="item" mode="scaleToFill"
					style="width: 300rpx;height: 150rpx;border-radius: 20rpx;margin-left: 35rpx;margin-right: 35rpx;">
				</image>
			</view>
		</view>
		<uni-grid :column="5" :showBorder="false">
			<uni-grid-item v-for="(item,index) in gridImages">
				<view class="" style="display: flex;flex-direction: column;align-items: center;">
					<image :src="item" mode="scaleToFill" style="width: 90rpx;height: 90rpx; border-radius: 100%	;">
					</image>
					<text>{{gridNames[index]}} </text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-section title="医院列表" type="line"></uni-section>
		<scroll-view scroll-y="true" style="height: 550rpx;">
			<view class="" v-for="(item,index) in listImages">
				<uni-list-chat :title="listTitle[index]" :avatar="item" :note="listAddress[index]"
					time="2020-02-02 20:20" badge-positon="left"></uni-list-chat>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	const image = "http://p1.music.126.net/ERfb0ixDarFj79hDApnw_g==/109951169410578819.jpg?imageView&quality=89"
	const gridImage = "http://q.qlogo.cn/headimg_dl?dst_uin=2528152223&spec=640&img_type=jpg"
	const name = "示例"
	const address = "地址"

	// 轮播图
	const swiperImages = ["https://p8.itc.cn/q_70/images01/20230509/57718206b5df47529e5be02196303de9.jpeg",
		"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F1121%2F291e6c98j00rlog2y001kc000sg00fzm.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
		"https://img2.baidu.com/it/u=2490927558,1387599733&fm=253&fmt=auto&app=120&f=JPEG?w=1440&h=800"
	]
	// 两个按钮
	const Images = ["https://img0.baidu.com/it/u=19291233,1783053783&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
		"https://img0.baidu.com/it/u=629151331,2441734896&fm=253&fmt=auto&app=120&f=JPEG?w=550&h=741"
	]
	// 九宫格图片
	const gridImages = ["/static/index_image/预约.png", "/static/index_image/陪同人.png", "/static/index_image/医院导航.png","/static/index_image/咨询.png", "/static/index_image/问医生.png", "/static/index_image/紧急救助.png", "/static/index_image/翻译服务.png", "/static/index_image/健康档案.png", "/static/index_image/支付功能.png",
		"/static/index_image/用户评价.png"
	]
	// 九宫格名字
	const gridNames = ["预约陪诊", "陪同就诊", "医院导航", "医疗咨讯", "在线咨询", "紧急救助", "翻译服务", "健康档案", "支付功能", "用户评价"]
	// 列表图片
	const listImages = ["/static/doctor_image/doctor (1).jpg","/static/doctor_image/doctor (3).jpg", "/static/doctor_image/doctor (4).jpg","/static/doctor_image/doctor (5).jpg", "/static/doctor_image/doctor (6).jpg", "/static/doctor_image/doctor (7).jpg","/static/doctor_image/doctor (8).jpg", "/static/doctor_image/doctor (9).jpg", "/static/doctor_image/doctor (10).jpg",
		"/static/doctor_image/doctor (2).jpg"
	]
	//列表信息
	const listTitle = ["北京大学第一医院", "上海交通大学医学院附属瑞金医院","广州市第一人民医院", "武汉大学人民医院", "四川大学华西医院", "南京大学医学院附属鼓楼医院", "复旦大学附属华东医院", "西安交通大学第一附属医院","中山大学附属第一医院", "厦门大学附属第一医院"]
	//列表内容
	const listAddress = ["北京大学第一医院（北京大学医学部附属第一医院）始建于1915年，是一所综合性三级甲等医院，也是国家卫生计生委和北京市卫生计生委规划建设的重点医院之一。","上海交通大学医学院附属瑞金医院，简称瑞金医院，创立于1907年，前身为圣约翰医院，是一所集医疗、教学、科研、预防保健、康复、急救为一体的大型现代化综合性医院。", "广州市第一人民医院创立于1916年，前身为华侨医院，是广州市规模最大、综合实力最强的三级甲等医院之一。", "武汉大学人民医院是湖北省唯一一家由教育部直属，国家卫生计生委和湖北省共建的大型综合性三级甲等医院。","四川大学华西医院是中国西部地区最大、科研实力雄厚、综合实力较强的三级甲等医院之一。"]
</script>

<style>
	.container {
		background-color: white;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>